<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/logo.png"/>
      </div>
      <!-- 表单 -->
      <div class="box_login">
          <div class="login_form">
          <label>登录名称</label>
          <input type="text" id='username' placeholder="请输入登录名称" v-model.trim="username"/>
        </div>
         <div class="login_form">
          <label>登录密码</label>
          <input type="password" id='password' placeholder="请输入登录名称" v-model="password"/>
        </div>
        <div>
           <button @click="login">登录</button>
           <button>重置</button>
        </div>
      
      </div>
       
    </div>
  </div>
</template>
 
<script>
export default {
    /*eslint-disable*/
    name:"Login",
data(){
    return{
    
            username:'admin',
            password:'123321',
        
        rules:{
            username:[
                 { required: true, message: '请输入登录名称', trigger: 'blur' },
                 { min: 3, max:10, message: '长度在 3 到 10个字符', trigger: 'blur' }
            ],
            password:[
                 { required: true, message: '请输入登录密码', trigger: 'blur' },
                 { min: 6, max:15, message: '长度在 6 到 15个字符', trigger: 'blur' }
            ]
        }
    }
},
methods:{
    // FormReset(){
    //   // 重置数据
    //     this.$refs.FormRef.resetFields()
    // },
  login(){
    if(this.username==='admin'&&this.password==="123321"){
      this.$router.push('/home')
      return localStorage.setItem('token','Bearee xxx')

    }else{
      
    localStorage.removeItem('token')

    }
  }
}
}
</script>

<style lang='less' scoped>
.login_container{
  background: #2b4b6b;
  height: 100vh;
}
.login_box{
  width: 450px;
  height: 300px;
  position: absolute;
  background: #fff;
  border-radius: 5px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  .avatar_box{
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 1px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #eee;
    }
  }
  .box_login{
   
margin: 110px 40px;
.login_form{display: flex;}
   #username{
     width: 260px;
     height: 30px;
     border: 1px solid #2b4b6b;
     border-radius: 5px;
     padding: 2px 15px;margin:0 0 20px 10px;
   }
   #password{
     width: 260px;
     height: 30px;
     border: 1px solid #2b4b6b;
     border-radius: 5px;
     padding: 2px 15px;margin:0 0 20px 10px;
   }
         
}
.btns{position: absolute;
    display: flex;
    margin: 20px ;
    // float: right ;
    // right: 220px;
    justify-content: flex-end;
    .el-button{
          margin:0 5px ;
         
    }}
button{
  float: right;
  margin: 10px ;
}
}


</style>